<template>
  <div>
    <v-form v-model="valid" ref="myBrandForm">
      <v-text-field
        v-model="brand.name"
        label="Name"
        :rules="nameRules"
        required
      ></v-text-field>


      <v-text-field
        v-model="brand.letter"
        label="letter"
        :rules="letterRules"
        required
      ></v-text-field>

      <!--级联下拉菜单-->
      <v-cascader
        url="/item/category/list"
        multiple
        required
        v-model="brand.categories"
        label="请选择商品分类"/>


      <!--文件上传组件-->
      <v-layout row>
        <v-flex xs3>
          <span style="font-size: 16px; color: #444">品牌LOGO：</span>
        </v-flex>
        <v-flex>
          <v-upload
            v-model="brand.image"
            url="/upload/image"
            :multiple="false"
            :pic-width="250"
            :pic-height="90"
          />
        </v-flex>
      </v-layout>


      <v-layout class="my-4" row>
        <v-spacer/>
        <v-btn @click="submit" color="primary">提交</v-btn>
        <v-btn @click="clear">重置</v-btn>
      </v-layout>

    </v-form>
  </div>
</template>

<script>
  export default {
    name: "my-brand-form",
    data() {
      return {
        valid: false,
        brand: {
          name: '', // 品牌名称
          letter: '', // 品牌首字母
          image: '',// 品牌logo
          categories: [], // 品牌所属的商品分类数组
        },
        nameRules: [
          v => !!v || "品牌名称不能为空",
          v => v.length > 1 || "品牌名称至少2位"
        ],
        letterRules: [
          v => !!v || "首字母不能为空",
          v => /^[A-Z]{1}$/.test(v) || "品牌字母只能是A~Z的大写字母,并且只要一个"
        ]
      }
    },
    props: {
      oldBrand: {
        type: Object,
        default: {}
      },
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      submit() {
        // 1、表单校验
        if (this.$refs.myBrandForm.validate()) {
          // 2、定义一个请求参数对象，通过解构表达式来获取brand中的属性
          const {categories, ...params} = this.brand;

          params.cids = categories.map(category => category.id).join(",");//表示今后传入后台的是cids={76,85,33}


          console.log(params);

          this.$http(
            {
              method: this.isEdit ? 'put' : 'post',
              url:"item/brand",
              data:this.$qs.stringify(params)
            }
          ).then(() => {
              this.$message.success("保存成功")
              this.$emit("close");
            }).catch(() => {
            alert("失败请重试");
          })
        } else {
          this.$message.error("保存失败")
        }
      },
      clear() {
        //this表示的是myBrandForm这玩意这里是父，其实reset方法属于子，父组件访问子组件的方法
        this.$refs.myBrandForm.reset();

        this.brand.categories = [];
      }
    },
    watch: {
      oldBrand: {// 监控oldBrand的变化
        handler(val) {
          if (val) {
            // 注意不要直接复制，否则这边的修改会影响到父组件的数据，copy属性即可
            this.brand = Object.deepCopy(val);
          } else {
            // 为空，初始化brand
            this.brand = {
              name: '',
              letter: '',
              image: '',
              categories: [],
            }
          }
        },
        deep: true
      }
    }
  }
</script>

<style scoped>

</style>
